<!DOCTYPE html>
<html lang="zh-Hans">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="Note">
    

    <!--Author-->
    
        <meta name="author" content="兰陵忧患生">
    

    <!-- Title -->
    
    <title>jQuery | Lan</title>

    <!-- Bootstrap Core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- Content -->
    <section class="article-container">
<!-- Back Home -->
<a class="nav-back" href="/">
    <i class="fa fa-puzzle-piece"></i>
</a>

<!-- Page Header -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>jQuery</h1>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- TOC -->
            <div class="toc-article col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#语法"><span class="toc-text">语法</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#名称冲突"><span class="toc-text">名称冲突</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#选择器"><span class="toc-text">选择器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#事件"><span class="toc-text">事件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#bind-unbind"><span class="toc-text">bind unbind</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#blur"><span class="toc-text">blur</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#change"><span class="toc-text">change</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#click"><span class="toc-text">click</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dblclick"><span class="toc-text">dblclick</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#delegate-undelegate"><span class="toc-text">delegate undelegate</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#live"><span class="toc-text">live</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#die"><span class="toc-text">die</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#error"><span class="toc-text">error</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#focus"><span class="toc-text">focus</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#keydown-keyup-keypress"><span class="toc-text">keydown keyup keypress</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#load-unload"><span class="toc-text">load unload</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mouseover-mouseout"><span class="toc-text">mouseover mouseout</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mouseenter-mouseleave"><span class="toc-text">mouseenter mouseleave</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mouseup-mousedown"><span class="toc-text">mouseup mousedown</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mousemove"><span class="toc-text">mousemove</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#one"><span class="toc-text">one</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ready"><span class="toc-text">ready</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#resize"><span class="toc-text">resize</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#scroll"><span class="toc-text">scroll</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#select"><span class="toc-text">select</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#submit"><span class="toc-text">submit</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#toggle"><span class="toc-text">toggle</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#trigger"><span class="toc-text">trigger</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#triggerHandler"><span class="toc-text">triggerHandler</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#event"><span class="toc-text">event</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#preventDefault-isDefaultPrevented"><span class="toc-text">preventDefault isDefaultPrevented</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#pageX-pageY"><span class="toc-text">pageX pageY</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#result"><span class="toc-text">result</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#target"><span class="toc-text">target</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#timeStamp"><span class="toc-text">timeStamp</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#type"><span class="toc-text">type</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#which"><span class="toc-text">which</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#效果"><span class="toc-text">效果</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#animate"><span class="toc-text">animate</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#queue-dequeue-clearQueue-delay-stop"><span class="toc-text">queue dequeue clearQueue delay stop</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#fadeIn-fadeOut-fadeTo-fadeToggle"><span class="toc-text">fadeIn fadeOut fadeTo fadeToggle</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#hide-show-toggle"><span class="toc-text">hide show toggle</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#slideDown-slideUp-slideToggle"><span class="toc-text">slideDown slideUp slideToggle</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Callback"><span class="toc-text">Callback</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Chaining"><span class="toc-text">Chaining</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#jQuery-HTML"><span class="toc-text">jQuery HTML</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML"><span class="toc-text">HTML</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#after-before"><span class="toc-text">after before</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#insertAfter-insertBefore"><span class="toc-text">insertAfter insertBefore</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#append-appendTo-prepend-prependTo"><span class="toc-text">append appendTo prepend prependTo</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#clone"><span class="toc-text">clone</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#detach-remove-empty"><span class="toc-text">detach remove empty</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#replaceAll-replaceWith"><span class="toc-text">replaceAll replaceWith</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#wrap-unwrap-wrapAll-wrapInner"><span class="toc-text">wrap unwrap wrapAll wrapInner</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#data"><span class="toc-text">data</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM"><span class="toc-text">DOM</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS"><span class="toc-text">CSS</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#遍历"><span class="toc-text">遍历</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#each"><span class="toc-text">each</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#end"><span class="toc-text">end</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map"><span class="toc-text">map</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#next-nextAll-nextUnit"><span class="toc-text">next nextAll nextUnit</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#offsetParent-parent-parents-parentsUntil"><span class="toc-text">offsetParent parent parents parentsUntil</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#prev-prevAll-prevUntil"><span class="toc-text">prev prevAll prevUntil</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#siblings"><span class="toc-text">siblings</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#slice"><span class="toc-text">slice</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Ajax"><span class="toc-text">Ajax</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#jQuery-工具"><span class="toc-text">jQuery 工具</span></a></li></ol>
</div>

            <!-- Post Main Content -->
            <div class="post-content col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h1 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h1><pre><code class="JS">$(selector).action()
// jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
</code></pre>
<h2 id="名称冲突"><a href="#名称冲突" class="headerlink" title="名称冲突"></a>名称冲突</h2><pre><code class="JS">var jq = jQuery.noConflict();
</code></pre>
<h1 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h1><pre><code class="JS">// XPath 表达式来选择带有给定属性的元素
$(&quot;[href]&quot;) // 选取所有带有 href 属性的元素
$(&quot;[href$=&#39;.jpg&#39;]&quot;) // 选取所有 href 值以 &quot;.jpg&quot; 结尾的元素
</code></pre>
<h1 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h1><h2 id="bind-unbind"><a href="#bind-unbind" class="headerlink" title="bind unbind"></a>bind unbind</h2><pre><code class="JS">// 向匹配元素附加一个或更多事件处理器
$(selector).bind(event, data, function)

// 替换语法
$(selector).bind(
{
    event: function, 
    event: function, 
    ...
})

// unbind
// 该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行
// ubind() 适用于任何通过 jQuery 附加的事件处理程序
$(selector).unbind(event, function)
// event 如果只规定了该参数，则会删除绑定到指定事件的所有函数

$(selector).unbind(eventObj)
</code></pre>
<h2 id="blur"><a href="#blur" class="headerlink" title="blur"></a>blur</h2><pre><code class="JS">// 当元素失去焦点时发生 blur 事件
$(selector).blur(function)
</code></pre>
<h2 id="change"><a href="#change" class="headerlink" title="change"></a>change</h2><pre><code class="JS">// 当元素的值发生改变时，会发生 change 事件
// 该事件仅适用于文本域（text field），以及 textarea 和 select 元素

// 当用于 select 元素时，change 事件会在选择某个选项时发生
// 当用于 text field 或 text area 时，该事件会在元素失去焦点时发生

$(selector).change(function)
</code></pre>
<h2 id="click"><a href="#click" class="headerlink" title="click"></a>click</h2><pre><code class="JS">$(selector).click(function)
</code></pre>
<h2 id="dblclick"><a href="#dblclick" class="headerlink" title="dblclick"></a>dblclick</h2><pre><code class="JS">// 当双击元素时，会发生 dblclick 事件
// 如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题
$(selector).dblclick(function)
</code></pre>
<h2 id="delegate-undelegate"><a href="#delegate-undelegate" class="headerlink" title="delegate undelegate"></a>delegate undelegate</h2><pre><code class="JS">// delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
// 适用于当前或未来的元素（比如由脚本创建的新元素）
$(selector).delegate(childSelector, event, data, function)

// undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序
$(selector).undelegate(selector, event, function)
</code></pre>
<h2 id="live"><a href="#live" class="headerlink" title="live"></a><del>live</del></h2><pre><code class="JS">// deprecated
// live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
// 适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）

$(selector).live(event, data, function)
</code></pre>
<h2 id="die"><a href="#die" class="headerlink" title="die"></a>die</h2><pre><code class="JS">// 移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序

$(selector).die(event, function)
</code></pre>
<h2 id="error"><a href="#error" class="headerlink" title="error"></a>error</h2><pre><code class="JS">// 当元素遇到错误（没有正确载入）时，发生 error 事件
$(selector).error(function)

bind(&#39;error&#39;, handler)
</code></pre>
<h2 id="focus"><a href="#focus" class="headerlink" title="focus"></a>focus</h2><pre><code class="JS">// 当元素获得焦点时，发生 focus 事件
// 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点

$(selector).focus(function)
</code></pre>
<h2 id="keydown-keyup-keypress"><a href="#keydown-keyup-keypress" class="headerlink" title="keydown keyup keypress"></a>keydown keyup keypress</h2><pre><code class="JS">// 完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开

// 当按钮被按下时，发生 keydown 事件
$(selector).keydown(function)

// 当按钮被松开时，发生 keyup 事件
$(selector).keyup(function)

// 当按钮被按下时，每插入一个字符，就会发生 keypress 事件
$(selector).keypress(function)
</code></pre>
<ul>
<li>如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生</li>
</ul>
<h2 id="load-unload"><a href="#load-unload" class="headerlink" title="load unload"></a>load unload</h2><pre><code class="JS">// 当指定的元素（及子元素）已加载时，会发生 load() 事件
// 适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）
$(selector).load(function)

// 当用户离开页面时，会发生 unload 事件
event.unload(function)
// unload() 方法只应用于 window 对象。

$(window).unload(function(){
  alert(&quot;Goodbye!&quot;);
});
</code></pre>
<ul>
<li><p>当发生以下情况时，会发出 unload 事件</p>
<ul>
<li>点击某个离开页面的链接</li>
<li>在地址栏中键入了新的 URL</li>
<li>使用前进或后退按钮</li>
<li>关闭浏览器</li>
<li>重新加载页面</li>
</ul>
</li>
</ul>
<h2 id="mouseover-mouseout"><a href="#mouseover-mouseout" class="headerlink" title="mouseover mouseout"></a>mouseover mouseout</h2><pre><code class="JS">// 当鼠标指针位于元素上方时，会发生 mouseover 事件
$(selector).mouseover(function)

// 当鼠标指针从元素上移开时，发生 mouseout 事件
$(selector).mouseout(function)
</code></pre>
<ul>
<li>与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</li>
<li>与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</li>
</ul>
<h2 id="mouseenter-mouseleave"><a href="#mouseenter-mouseleave" class="headerlink" title="mouseenter mouseleave"></a>mouseenter mouseleave</h2><pre><code class="JS">// 当鼠标指针穿过元素时，会发生 mouseenter 事件
$(selector).mouseenter(function)

// 当鼠标指针离开元素时，会发生 mouseleave 事件
$(selector).mouseleave(function)
</code></pre>
<h2 id="mouseup-mousedown"><a href="#mouseup-mousedown" class="headerlink" title="mouseup mousedown"></a>mouseup mousedown</h2><pre><code class="JS">// 当在元素上放松鼠标按钮时，会发生 mouseup 事件
// 与 click 事件不同，mouseup 事件仅需要放松按钮
$(selector).mouseup(function)

// 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
// 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
$(selector).mousedown(function)
</code></pre>
<h2 id="mousemove"><a href="#mousemove" class="headerlink" title="mousemove"></a>mousemove</h2><pre><code class="JS">// 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
$(selector).mousemove(function)
</code></pre>
<ul>
<li>用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。</li>
</ul>
<h2 id="one"><a href="#one" class="headerlink" title="one"></a>one</h2><pre><code class="JS">// one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数
// 当使用 one() 方法时，每个元素只能运行一次事件处理器函数
$(selector).one(event, data, function)
</code></pre>
<h2 id="ready"><a href="#ready" class="headerlink" title="ready"></a>ready</h2><pre><code class="JS">// 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件
// 由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
// ready() 函数仅能用于当前文档，因此无需选择器
$(document).ready(function)
$().ready(function)
$(function)
</code></pre>
<ul>
<li>ready() 函数不应与 <code>&lt;body onload=&quot;&quot;&gt;</code> 一起使用</li>
</ul>
<h2 id="resize"><a href="#resize" class="headerlink" title="resize"></a>resize</h2><pre><code class="JS">// 当调整浏览器窗口的大小时，发生 resize 事件
$(selector).resize(function)
</code></pre>
<h2 id="scroll"><a href="#scroll" class="headerlink" title="scroll"></a>scroll</h2><pre><code class="JS">// 当用户滚动指定的元素时，会发生 scroll 事件
// scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
$(selector).scroll(function)
</code></pre>
<h2 id="select"><a href="#select" class="headerlink" title="select"></a>select</h2><pre><code class="JS">// 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
$(selector).select(function)
</code></pre>
<h2 id="submit"><a href="#submit" class="headerlink" title="submit"></a>submit</h2><pre><code class="JS">// 当提交表单时，会发生 submit 事件
$(selector).submit(function)
</code></pre>
<h2 id="toggle"><a href="#toggle" class="headerlink" title="toggle"></a>toggle</h2><pre><code class="JS">// toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
// 当指定元素被点击时，在两个或多个函数之间轮流切换。
$(selector).toggle(
    function1(), 
    function2(), 
    functionN(), 
    ...
)

// 切换 Hide() 和 Show()
// 检查每个元素是否可见
$(selector).toggle(speed, callback)
// speed 可选 默认值 0 （毫秒，slow, normal, fast）

// 是否只显示或只隐藏所有匹配的元素
$(selector).toggle(switch)
// switch 必需。布尔值
// true - 显示元素
// false - 隐藏元素
</code></pre>
<h2 id="trigger"><a href="#trigger" class="headerlink" title="trigger"></a>trigger</h2><pre><code class="JS">// trigger() 方法触发被选元素的指定事件类型
$(selector).trigger(event, [param1, param2, ...])

// 使用 Event 对象来触发事件
$(selector).trigger(eventObj)
// eventObj 规定事件发生时运行的函数
</code></pre>
<h2 id="triggerHandler"><a href="#triggerHandler" class="headerlink" title="triggerHandler"></a>triggerHandler</h2><pre><code class="JS">// triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡
// triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素
$(selector).triggerHandler(event, [param1, param2, ...])
</code></pre>
<h2 id="event"><a href="#event" class="headerlink" title="event"></a>event</h2><h3 id="preventDefault-isDefaultPrevented"><a href="#preventDefault-isDefaultPrevented" class="headerlink" title="preventDefault isDefaultPrevented"></a>preventDefault isDefaultPrevented</h3><pre><code class="JS">// 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
event.preventDefault()

// 防止链接打开 URL：
$(&quot;a&quot;).click(function(event){
  event.preventDefault();
});

// isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法
event.isDefaultPrevented()
</code></pre>
<h3 id="pageX-pageY"><a href="#pageX-pageY" class="headerlink" title="pageX pageY"></a>pageX pageY</h3><pre><code class="JS">// pageX() 属性是鼠标指针的位置，相对于文档的左边缘
event.pageX

// pageY() 属性是鼠标指针的位置，相对于文档的上边缘
event.pageY
</code></pre>
<h3 id="result"><a href="#result" class="headerlink" title="result"></a>result</h3><pre><code class="JS">// result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义
event.result

$(&quot;button&quot;).click(function(e) {
  $(&quot;p&quot;).html(e.result);
});
</code></pre>
<h3 id="target"><a href="#target" class="headerlink" title="target"></a>target</h3><pre><code class="JS">// target 属性规定哪个 DOM 元素触发了该事件
event.target
event.target.nodeName
</code></pre>
<h3 id="timeStamp"><a href="#timeStamp" class="headerlink" title="timeStamp"></a>timeStamp</h3><pre><code class="JS">// timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.timeStamp
</code></pre>
<h3 id="type"><a href="#type" class="headerlink" title="type"></a>type</h3><pre><code class="JS">// type 属性描述触发哪种事件类型
event.type
</code></pre>
<h3 id="which"><a href="#which" class="headerlink" title="which"></a>which</h3><pre><code class="JS">// which 属性指示按了哪个键或按钮
event.which
</code></pre>
<h1 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h1><h2 id="animate"><a href="#animate" class="headerlink" title="animate"></a>animate</h2><pre><code class="JS">// 执行 CSS 属性集的自定义动画
// 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果
// 只有数字值可创建动画（比如 &quot;margin: 30px&quot;）。字符串值无法创建动画（比如 &quot;background-color: red&quot;）

$(selector).animate(styles, speed, easing, callback)
// speed 规定动画的速度。默认是 &quot;normal&quot;
// easing 可选。规定在不同的动画点中设置动画速度的 easing 函数 (swing / linear)

$(selector).animate(styles, options)
</code></pre>
<ul>
<li>使用 “+=” 或 “-=” 来创建相对动画（relative animations）</li>
</ul>
<h2 id="queue-dequeue-clearQueue-delay-stop"><a href="#queue-dequeue-clearQueue-delay-stop" class="headerlink" title="queue dequeue clearQueue delay stop"></a>queue dequeue clearQueue delay stop</h2><ul>
<li>jQuery 提供针对动画的队列功能</li>
<li>如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。</li>
</ul>
<pre><code class="JS">// queue 显示被选元素的排队函数
// dequeue 运行被选元素的下一个排队函数
// clearQueue() 方法停止队列中所有仍未执行的函数
// 与 stop() 方法不同，（只适用于动画），clearQueue() 能够清除任何排队的函数（通过 .queue() 方法添加到通用 jQuery 队列的任何函数）
$(selector).clearQueue(queueName)

// delay 对被选元素的所有排队函数（仍未运行）设置延迟

// stop() 方法停止当前正在运行的动画
$(selector).stop(stopAll, goToEnd)
</code></pre>
<h2 id="fadeIn-fadeOut-fadeTo-fadeToggle"><a href="#fadeIn-fadeOut-fadeTo-fadeToggle" class="headerlink" title="fadeIn fadeOut fadeTo fadeToggle"></a>fadeIn fadeOut fadeTo fadeToggle</h2><pre><code class="JS">// fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的
$(selector).fadeIn(speed, callback)
// 该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display: none 的元素（但不适用于 visibility: hidden 的元素）

// fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是显示的
$(selector).fadeOut(speed, callback)

// fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值
$(selector).fadeTo(speed, opacity, callback)
// opacity 必须 规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字

$(selector).fadeToggle(speed, callback);
</code></pre>
<h2 id="hide-show-toggle"><a href="#hide-show-toggle" class="headerlink" title="hide show toggle"></a>hide show toggle</h2><pre><code class="JS">$(selector).hide(speed, callback)
$(selector).show(speed, callback)

// toggle() 方法切换元素的可见状态
$(selector).toggle(speed, callback)
$(selector).toggle(switch)
// switch 可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
//      True - 显示所有元素
//      False - 隐藏所有元素
</code></pre>
<h2 id="slideDown-slideUp-slideToggle"><a href="#slideDown-slideUp-slideToggle" class="headerlink" title="slideDown slideUp slideToggle"></a>slideDown slideUp slideToggle</h2><pre><code class="JS">// slideDown() 方法通过使用滑动效果，显示隐藏的被选元素
$(selector).slideDown(speed, callback)

// 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话
$(selector).slideUp(speed, callback)

// slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态
$(selector).slideToggle(speed, callback)
</code></pre>
<h2 id="Callback"><a href="#Callback" class="headerlink" title="Callback"></a>Callback</h2><ul>
<li>Callback 函数在当前动画 100% 完成之后执行</li>
</ul>
<h2 id="Chaining"><a href="#Chaining" class="headerlink" title="Chaining"></a>Chaining</h2><ul>
<li>通过 jQuery，您可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法。</li>
</ul>
<h1 id="jQuery-HTML"><a href="#jQuery-HTML" class="headerlink" title="jQuery HTML"></a>jQuery HTML</h1><h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2><pre><code class="JS">// 下面四个都有回调函数
text() // 设置或返回所选元素的文本内容
html() // 设置或返回所选元素的内容（包括 HTML 标记）
val() // 设置或返回表单字段的值
attr() // 方法用于获取属性值

$(selector).attr(attribute)
$(selector).attr(attribute, value)
removeAttr()

addClass()
hasClass()
toggleClass() // 对设置或移除被选元素的一个或多个类进行切换
$(selector).toggleClass(class, switch)
$(selector).toggleClass(function(index, class), switch)

removeClass()
</code></pre>
<h3 id="after-before"><a href="#after-before" class="headerlink" title="after before"></a>after before</h3><ul>
<li>在匹配的语速之后，之前插入（或移动）内容</li>
</ul>
<h3 id="insertAfter-insertBefore"><a href="#insertAfter-insertBefore" class="headerlink" title="insertAfter insertBefore"></a>insertAfter insertBefore</h3><h3 id="append-appendTo-prepend-prependTo"><a href="#append-appendTo-prepend-prependTo" class="headerlink" title="append appendTo prepend prependTo"></a>append appendTo prepend prependTo</h3><pre><code class="JS">// append() 方法在被选元素的结尾（仍然在内部）插入指定内容
$(selector).append(content)
$(selector).append(function(index, html))

// appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容
$(content).appendTo(selector)
</code></pre>
<ul>
<li>append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容</li>
</ul>
<h3 id="clone"><a href="#clone" class="headerlink" title="clone"></a>clone</h3><pre><code class="JS">// clone() 方法生成被选元素的副本，包含子节点、文本和属性
$(selector).clone(includeEvents)

$(&quot;button&quot;).click(function(){
  $(&quot;body&quot;).append($(&quot;p&quot;).clone());
}); // 复制每个 p 元素，然后追加到 body 元素
</code></pre>
<h3 id="detach-remove-empty"><a href="#detach-remove-empty" class="headerlink" title="detach remove empty"></a>detach remove empty</h3><pre><code class="JS">// 两个方法 移除被选元素，包括所有文本和子节点
// 两个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素
$(selector).detach()
$(selector).remove()

// 删除被选元素的子元素
$(selector).empty()
</code></pre>
<ul>
<li>detach() 会保留所有绑定的事件、附加的数据（除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据）</li>
</ul>
<h3 id="replaceAll-replaceWith"><a href="#replaceAll-replaceWith" class="headerlink" title="replaceAll replaceWith"></a>replaceAll replaceWith</h3><pre><code class="JS">$(content).replaceAll(selector)

$(selector).replaceWith(content)
$(selector).replaceWith(function())
</code></pre>
<ul>
<li>replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。</li>
</ul>
<h3 id="wrap-unwrap-wrapAll-wrapInner"><a href="#wrap-unwrap-wrapAll-wrapInner" class="headerlink" title="wrap unwrap wrapAll wrapInner"></a>wrap unwrap wrapAll wrapInner</h3><pre><code class="JS">// wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中
$(selector).wrap(wrapper)
// wrapper
//      HTML 代码 - 比如 (&quot;&lt;div&gt;&lt;/div&gt;&quot;)
//      新元素 - 比如 (document.createElement(&quot;div&quot;))
//      已存在的元素 - 比如 ($(&quot;.div1&quot;))
// 已存在的元素不会被移动，只会被复制，并包裹被选元素。

$(selector).wrap(function())

// unwrap() 方法删除被选元素的父元素
$(selector).unwrap()

// wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素
$(selector).wrapAll(wrapper)

// wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)
$(selector).wrapInner(wrapper)
$(selector).wrapInner(function())
</code></pre>
<h3 id="data"><a href="#data" class="headerlink" title="data"></a>data</h3><pre><code class="JS">$(selector).data(name)
$(selector).data(name, value)
jQuery.hasData(element)
$(selector).removeData(name)
</code></pre>
<h3 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h3><pre><code class="JS">$(selector).get(index)

$(selector).index() // 获得第一个匹配元素相对于其同胞元素的 index 位置
$(selector).index(element)

$(selector).size()
$(selector).toArray()
</code></pre>
<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><pre><code class="JS">$(selector).css(name)
$(selector).css(name, function(index, value))
$(selector).css(name, value)
$(selector).css({property: value, property: value, ...})
</code></pre>
<h1 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h1><pre><code class="JS">.children(selector)
.closest(selector) // 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上
.contents() // 获得匹配元素集合中每个元素的子节点，包括文本和注释节点
.find(selector) // 获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选

.first() // 将匹配元素集合缩减为集合中的第一个元素
.last()
.eq(index) // 将匹配元素集缩减值指定 index 上的一个
.filter(selector) // 将匹配元素集合缩减为匹配指定选择器的元素
.has(selector) // 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集
.is(selector) // 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true
.not(selector)
</code></pre>
<h2 id="each"><a href="#each" class="headerlink" title="each"></a>each</h2><pre><code class="JS">// each() 方法规定为每个匹配元素规定运行的函数
$(selector).each(function(index, element))
// 返回 false 可用于及早停止循环
</code></pre>
<h2 id="end"><a href="#end" class="headerlink" title="end"></a>end</h2><pre><code class="JS">// 结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
.end() // 上一次的元素集
$(&quot;p&quot;).find(&quot;span&quot;).end().css(&quot;border&quot;, &quot;2px red solid&quot;);
</code></pre>
<h2 id="map"><a href="#map" class="headerlink" title="map"></a>map</h2><pre><code class="JS">// map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象
.map(callback(index, domElement))

$(&#39;:checkbox&#39;).map(function() {
  return this.id;
}).get().join(&#39;,&#39;);

// 由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
</code></pre>
<h2 id="next-nextAll-nextUnit"><a href="#next-nextAll-nextUnit" class="headerlink" title="next nextAll nextUnit"></a>next nextAll nextUnit</h2><pre><code class="JS">// next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素
.next(selector)

// nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的
.nextAll(selector)

// nextUntil() 获得每个元素所有跟随的同胞元素，但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素
.nextUntil(selector, filter)
.nextUntil(element, filter)
</code></pre>
<h2 id="offsetParent-parent-parents-parentsUntil"><a href="#offsetParent-parent-parents-parentsUntil" class="headerlink" title="offsetParent parent parents parentsUntil"></a>offsetParent parent parents parentsUntil</h2><pre><code class="JS">// offsetParent() 获得被定位的最近祖先元素
.offsetParent()

// parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的
.parent(selector)

// parents() 获得当前匹配元素集合中每个元素的祖先元素
.parents(selector)

// parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。
.parentsUntil(selector, filter)
.parentsUntil(element, filter)
</code></pre>
<h2 id="prev-prevAll-prevUntil"><a href="#prev-prevAll-prevUntil" class="headerlink" title="prev prevAll prevUntil"></a>prev prevAll prevUntil</h2><pre><code class="JS">// prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素
.prev(selector)

// prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素
.prevAll(selector)

// prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素，但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素。
.prevUntil(selector, filter)
.prevUntil(element, filter)
</code></pre>
<h2 id="siblings"><a href="#siblings" class="headerlink" title="siblings"></a>siblings</h2><pre><code class="JS">// siblings() 获得匹配集合中每个元素的同胞
.siblings(selector)
</code></pre>
<h2 id="slice"><a href="#slice" class="headerlink" title="slice"></a>slice</h2><pre><code class="JS">// slice() 把匹配元素集合缩减为指定的指数范围的子集
.slice(begin, end) // 左开右闭
</code></pre>
<h1 id="Ajax"><a href="#Ajax" class="headerlink" title="Ajax"></a>Ajax</h1><pre><code class="JS">jQuery.ajax([settings])

.ajaxStart(function())
.ajaxStop(function())
.ajaxComplete(function(event, xhr, options))
.ajaxError(function(event, xhr, options, exc))
.ajaxSend([function(event, xhr, options)])

jQuery.ajaxSetup(name: value, name: value, ...) // 设置全局 AJAX 默认选项

.ajaxSuccess(function(event, xhr, options))


$(selector).get(url, data, success(response, status, xhr), dataType)
jQuery.getJSON(url, data, success(data, status, xhr))
jQuery.getScript(url, success(response, status))

// load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中
load(url, data, function(response, status, xhr))

// 创建数组或对象的序列化表示
jQuery.param(object, traditional)

// 通过 HTTP POST 请求从服务器载入数据
jQuery.post(url, data, success(data, textStatus, jqXHR), dataType)

$.ajax({
  type: &#39;POST&#39;,
  url: url,
  data: data,
  success: success,
  dataType: dataType
});


// 通过序列化表单值，创建 URL 编码文本字符串
// 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
$(selector).serialize()

// serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）
$(selector).serializeArray() // 返回的是 JSON 对象
</code></pre>
<h1 id="jQuery-工具"><a href="#jQuery-工具" class="headerlink" title="jQuery 工具"></a>jQuery 工具</h1><ul>
<li>旋转 <a href="https://github.com/wilq32/jqueryrotate/" target="_blank" rel="external">jQueryRotate</a></li>
</ul>

 
                <!-- Meta -->
                <div class="post-meta">
                    <hr>
                    <br>
                    <div class="post-tags">
                        
                            

<a href="/tags/JavaScript/">#JavaScript</a>


                        
                    </div>
                    <div class="post-date">
                        2017 年 07 月 11 日
                    </div>
                </div>
            </div>

            <!-- Comments -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <!-- Disqus Comments -->


            </div>
        </div>
    </div>
</article>
</section>

    <!-- Scripts -->
    <!-- jQuery -->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
	hljs.initHighlightingOnLoad();
	console.log('Hexo-theme-hollow designed by zchen9 http://www.chen9.info © 2015-' + (new Date()).getFullYear());
</script>

    <!-- Google Analytics -->
    

</body>

</html>